<template>
  <div>
    <div class="header">
      <el-menu
        router
        :default-active="this.$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/weight">体重明细</el-menu-item>
        <el-menu-item index="/zichan">资产明细</el-menu-item>
        <el-menu-item index="/touzi">投资明细</el-menu-item>
        <el-menu-item index="/liushui">花销明细</el-menu-item>
      </el-menu>

      <div class="user">
        你好：{{ username }}&emsp;
        <el-button type="info" size="mini" @click="logout" round
          >注销</el-button
        >
      </div>
    </div>
    <div class="admin3">
      <input
        type="text"
        v-model="start_money"
        placeholder="投资余额"
        style="width: 100px"
      />
      <input
        type="text"
        v-model="type"
        placeholder="类型:基金.股票.期货等"
        style="width: 130px"
      />
      <input
        type="text"
        v-model="postscript"
        placeholder="详情备注"
        style="width: 150px"
      />
      <button @click="submit">提交</button><br />
      <select v-model="type1" name="fruit">
        <option value="">请选择类型(默认全部)</option>
        <option value="全部">全部</option>
        <option value="已买入">已买入</option>
        <option value="已卖出">已卖出</option>
      </select>

      <button @click="get_data">查询</button>
      <div>
        <table border="1px">
          <tr>
            <td>买入时间</td>
            <td>买入金额</td>
            <td>类型</td>
            <td>详情备注</td>
            <td>卖出时间</td>
            <td>卖出金额</td>
            <td>周期/天</td>
            <td>收益</td>
            <td>收益率</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, i) in data" :key="i">
            <td>{{ item.start_time }}</td>
            <td>{{ item.start_money }}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.postscript }}</td>
            <td>{{ item.end_time }}</td>
            <td>{{ item.end_money }}</td>
            <td>{{ item.sum_time }}</td>
            <td>{{ item.shouyi }}</td>
            <td>{{ item.shouyilv }}</td>
            <td>
              <el-button type="text" @click="update(item.id, item.statue)"
                >卖出</el-button
              >
            </td>
          </tr>
        </table>
      </div>
      <div class="right-bar3">
        <div id="test_app">
          <!--echarts的容器-->
          <div id="main" style="width: 80%; height: 500px; color: weight"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      username: "",
      start_money: "",
      type: "",
      type1: "",
      postscript: "",
      data: [],
      charts: "",
      moneyData: [], //数据
      nameData: [], //时间数据
      lilvData: [], //利率数据
    };
  },
  created() {
    this.active = this.$route.query.active;
  },
  methods: {
    // 判断用户是否登录
    getuser() {
      if (
        localStorage.getItem("username") == "" ||
        localStorage.getItem("username") == null
      ) {
        this.$router.push({ path: "/" });
      } else {
        this.username = localStorage.getItem("username");
      }
    },
    // 退出登录
    logout() {
      localStorage.removeItem("username");
      this.$router.push({ path: "/" });
    },
    // 提交
    submit() {
      Axios.post("/user/write_touzi/", {
        user_id: localStorage.getItem("id"),
        start_money: this.start_money,
        type: this.type,
        postscript: this.postscript,
      })
        .then((resp) => {
          if (resp.data.code == 200) {
            alert(resp.data.msg);
            (this.start_money = ""),
              (this.type = ""),
              (this.postscript = ""),
              this.get_data();
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取
    get_data() {
      Axios.get("/user/get_touzi/", {
        params: { user_id: localStorage.getItem("id"), type: this.type1 },
      })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.data = resp.data.data;
            this.nameData = resp.data.namedata;
            this.moneyData = resp.data.moneydata;
            this.lilvData = resp.data.lilvdata;
            this.$nextTick(function () {
              this.drawLine("main");
            });
          } else {
            alert(resp.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }, // 更新数据
    update(id, statue) {
      if (statue == 0) {
        this.$prompt("请输入卖出金额", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            Axios.post("/user/update_touzi/", {
              end_money: value,
              id: id,
            })
              .then((resp) => {
                if (resp.data.code == 200) {
                  alert(resp.data.msg);

                  this.get_data();
                } else {
                  alert(resp.data.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch(() => {});
      } else {
        alert("已卖出");
      }
    },
    // 折线图
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          left: "40%",
          top: "3%",
          text: "投资收益明细",
          textStyle: {
            fontWeight: "normal",
            color: "white", //标题颜色
          },
        },
        legend: {
          // selectedMode: true, //可点击
          data: ["投资金额", "投资利率"],
          bottom: 0,
          left: "62%",
          top: "7%",
          textStyle: {
            fontWeight: "normal",
            color: "white", //标题颜色
          },
        },

        tooltip: {
          trigger: "axis",
        },

        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true, //保证刻度线和标签对齐
          },
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              color: "white",
              fontSize: "16",
            },
            interval: 0,
            rotate: 45,
          },
          data: this.nameData, //x坐标的名称
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: true,
            name: "投资金额",
            min: 0,
            max: 15000,
            splitNumber: 10, //纵坐标数
            interval: 1500, //强制设置坐标轴分割间隔
            //  改变y轴颜色
            axisLine: {
              lineStyle: {
                color: "white",
              },
            },
            //  改变y轴字体颜色和大小
            axisLabel: {
              textStyle: {
                color: "white",
                fontSize: "16",
              },
            },
          },
          {
            type: "value",
            boundaryGap: true,
            name: "投资利率",
            min: -0.5,
            max: 0.5,
            splitNumber: 10, //纵坐标数
            interval: 0.1, //强制设置坐标轴分割间隔
            //  改变y轴颜色
            axisLine: {
              lineStyle: {
                color: "white",
              },
            },
            //  改变y轴字体颜色和大小
            axisLabel: {
              // formatter: "{value} % ",
              textStyle: {
                color: "white",
                fontSize: "16",
                formatter: (value) => {
                  return Math.abs(value);
                },
              },
            },
          },
        ],
        series: [
          {
            name: "投资金额",
            type: "bar", //折线图line;柱形图bar;饼图pie
            yAxisIndex: 0,
            itemStyle: {
              color: "rgba(132, 136, 211, 1)",
            },
            data: this.moneyData,
          },
          {
            name: "投资利率",
            type: "line", //折线图line;柱形图bar;饼图pie
            connectNulls: true,
            yAxisIndex: 1,
            itemStyle: {
              color: "rgb(255,96,64)", //改变折线点的颜色
              lineStyle: {
                color: "rgb(255,96,64)", //改变折线颜色
              },
            },

            data: this.lilvData,
          },
        ],
      });
    },
  },
  mounted() {
    this.getuser();
    this.get_data();
  },
};
</script>

<style >
.admin3 {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/1.jpg");
  background-size: 100% 100%;
  position: fixed;
  line-height: 150%;
  padding-top: 80px;
  top: 58px;
  left: 0px;
  opacity: 0.9;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
.right-bar3 {
  top: 140px;
  float: right;
  right: -13%;
  width: 70%;
  height: 100%;
  position: absolute;
  overflow: auto;
  color: white;
}
</style>
